@sideBgc :#233c50;
@topNavHeight:50px;
@sideWidth:220px;
@detailBgc:#f8f8f8;
.portal-body,.portal-body body{
	.size(100%,100%);
	position: relative;
}


#portal-panel{
	.size(100%,100%);
	overflow: hidden;
	position: absolute;
}
#portal-header{
	position: absolute;
	top:0;
	left:0;
	z-index: 4;
	background-color: @mainColor;
	.size(100%,@topNavHeight);
	.logo{
		padding:10px;
		float: left;
		width: @sideWidth;
		a{	
			text-decoration: none;
			
			line-height: 40px;
			font-size: @fontSizeLarge;
			color: @mainColorText;
			img{height:40px;}
		}
		
	}


	.header-nav{
		.nav{
			list-style: none;
			&>li{
				float: left;
				max-height: @topNavHeight;
				&>a{
					padding:15px 20px ;
					font-size: 14px;
					line-height: 30px;
					color:#fff;
					display: block;
					max-height: @topNavHeight;
					box-sizing: border-box;
					text-decoration: none;
					i{font-size: 18px;}
					&:hover{
						background-color: darken(@mainColor, 10%)
					}
				}

				// &.sui-dropdown{
				// 	border-left: #5286e3 1px solid;
				// }
			}
		}
	}


	.header-nav-search{
		margin-bottom: 0;
		padding-top: 14px;
		input{
			background-color: @mainColorLight;
			border:0;
			.border-radius(15px);
			.placeholder(#fff);
		}
	}
	#headerNavMore{
		&>a{
			&:hover{background-color: #fff;color: #333;}
		}
		.dropdown-menu a{
				padding-top: 10px;
				padding-bottom: 10px;
		}
	}
	.portal-navlist-col4{
		ul{
			width: 400px;
			.clearfix();
			li{float: left;width: 25%; .text-overflow();
				
			}
		}

	}
}
#portal-content{
	position: absolute;
	top:@topNavHeight;
	left:0;
	right:0;
	bottom:0;
	// z-index: 7;
	&.portal-full{
		top:0;
		z-index: 6;
		.portal-side{z-index: 8;}
		.portal-detail{
			
			// left: 0!important;

			// .portal-toggle,.portal-side{display: none!important;}
		}
	}
	.portal-side{
		position: absolute;
		width: @sideWidth;
		left:0;
		bottom:0;
		top:0;
		background-color: @sideBgc;
		transition: transform 0.12s;
    -o-transition: -o-transform 0.12s;
    -ms-transition: -ms-transform 0.12s;
    -moz-transition: -moz-transform 0.12s;
    -webkit-transition: -webkit-transform 0.12s;

	}

	.portal-detail{
		position: absolute;
		left: @sideWidth;
		right:0;
		bottom:0;
		top:0;
		background-color: @detailBgc;
		.portal-tabNavbar{
			position: relative;
			height:35px;
			border-bottom: 1px solid #ececec;
			background-color:#fff;
			#portal-tabNav-next,#portal-tabNav-prev{display: none;}
			.portal-tabNav-more{
				position: absolute;
			    right: 5px;
			    // width: 70px;
			    top: 6px;
			    display: block;
			    .iconfont{font-size: 12px;}
			    .btn-group{
					// padding: 3px 10px;
					line-height: 20px;
				}

			}
			.portal-toggle{
				position: absolute;
				width: 35px;
				height:35px;
				line-height: 35px;
				color: #333;
				z-index: 2;
				text-align: center;
				
				text-decoration: none;
				i{line-height: 35px!important;font-size: 20px;}
				&:hover{text-decoration: none;color: #333; background-color: @grayLighter; }
			}


			/*选项卡导航*/
			.portal-tabNav-wp{position:relative; height:35px;overflow:hidden;margin-left: 35px;margin-right: 90px; }
			.portal-tabNav{height:35px;padding:0;margin: 0;  padding-right:75px;overflow:hidden; position:relative;}
			.portal-tabNav .acrossTab{
				position:absolute; z-index: 2; height:35px;list-style: none;
				line-height:35px; background:none; top:0; left:0;padding-top:0}
			.portal-tabNav .acrossTab li{height:35px;line-height:35px;padding:0 20px;color: #333; }
			.acrossTab li {
			    position: relative;
			    float: left;
			    display: inline-block;
			    height: 35px;
			    line-height: 35px;
			    font-size: 12px;
			    cursor: pointer;
			    padding: 0 30px 0 20px;
			    white-space: nowrap;
			    color: #282828;
			    border-right: 1px solid #ddd;
			    border-bottom: 1px solid #ececec;
			    background-position: 0 0;
			    letter-spacing: 2px;
				
				-webkit-user-select: none;
			     -moz-user-select: none;
			      -ms-user-select: none;
			       -o-user-select: none;
			          user-select: none;

			    &:nth-child(1){
			    	padding:0 20px;
			    }
			    &.active{
			    	background-color: @detailBgc;
			    	border-bottom: 1px solid @detailBgc;
			    }
			    &:hover{
			    	background:#eee;
			    }
			    .iconfont{
			    	position: absolute;right: 11px;
			    	top:50%;
			    	font-size: 14px;
			    	width: 15px;
				    padding-top: 2px;
				    line-height: 14px;
			    	margin-top: -8px;
					color: #aaa;
					text-align: center;
					.border-radius(2px);
			    	&:hover{
			    		background-color: #e26c62;
			    		color: #fff;
			    	}
			    }
			}
			.portal-tabNav .acrossTab li em{ right:-16px; height: 35px; width: 16px}
		}
		.portal-view{
			position: absolute;
			top:36px;
			left:0;
			right:0;
			bottom:0;
		}
	}
	
	.portal-pages{
		background-color: #fff;
		position: absolute;
		left: 20px;
		right:20px;
		bottom:20px;
		top:20px;
		.border-radius(5px);
		.portal-page{
			position: absolute;
			.size(100%,100%);
			top:0;
			left:0;
			display: none;
			&.active{display: block;}
		}
		iframe{.size(100%,100%);border:0;}
	}
}

/* 重写bootstrap样式 */
#portal-header{
	#headerNav_search{margin-right: 10px;}
	.navbar-default{border:0;background-color: @mainColor;}
	.navbar-brand{
		height:50px;
		min-width: 220px;
		padding:5px 15px;
		line-height: 40px;
		font-size: @fontSizeLarge;
		color: @mainColorText;
		img{height:40px;float: left;}
	}

	.navbar-nav>li>a {
	    padding-top: 15px;
	    padding-bottom: 15px;
	}
	.nav>li>a {padding: 15px 25px;}
	.navbar-form{
		margin-top: 8px;
		border-radius: 14px;
		overflow: hidden;
		padding:0;background-color: @mainColorLight;
		.btn,.form-control{
			background: none;border:0;
			color: #fff;
			.placeholder(#fff);
		}
	}
	.navbar-default .navbar-nav>li>a{color: @mainColorText;&:hover{background-color: darken(@mainColorLight,5%);}}

	.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover,
	.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
		background-color: #0e9ae2;
	}
}

/* 侧栏 */
#portal-side{
	z-index: 3;
	&.hideObj{
			.sidebar-text,.sidebar-arr{display: none!important;}
		}
	.panel,.panel-default>.panel-heading,.list-group-item{background:none;color: #c7c7c7;}
	.panel-heading{.border-radius(0)}
	.panel-default{border-color: transparent;}
	.list-group-item{text-align: center;}

	.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a{
		text-decoration: none;
	}

	.panel>.list-group .list-group-item, .panel>.panel-collapse>.list-group .list-group-item{
		border-width: 0 3px;
		border-color: transparent;

		&:hover,&.active{border-left-color: @mainColor;background-color: #142735;}
	}

	.glyphicon{margin-right: 5px;}
	.panel.open{
		background-color: #1A3041;
	}


	.sidebar-box{
		display: block;
		position: relative;
		color: #c7c7c7;
		.sidebar{
			position: relative;
			.sidebar-link{
				border: solid transparent; 
				border-width: 0 3px;
				display: block;
				text-decoration: none;
				position: relative;
				overflow:hidden;
				line-height: 45px;
				min-height: 45px;
				font-size: @fontSize;
				color: #c7c7c7;
				padding: 0 10px;
				letter-spacing: 1px;
				.clearfix();

				&:hover{
					background-color: darken(#243648, 10%)
				}

				&.hasChild{
					.sidebar-arr{display: block;}
				}
			}
			// .sidebar-text,.sidebar-icon{float: left;}
			.sidebar-text{margin-right: 40px;margin-left: 40px; .text-overflow();}
			.sidebar-icon{width: 40px;text-align: center;position: absolute;left: 0;top:0; }
			.sidebar-arr{
				display: none;
				.size(20px,20px);
				line-height: 20px;
				position: absolute;
				top:50%;
				right: 10px;
				margin-top: -10px;
				text-align: center;
				
				transition: transform 0.12s;
			    -o-transition: -o-transform 0.12s;
			    -ms-transition: -ms-transform 0.12s;
			    -moz-transition: -moz-transform 0.12s;
			    -webkit-transition: -webkit-transform 0.12s;
			    i{font-size: 12px;}
			}


			&.open{
				.sidebar-children{background-color:  #1d2c38;}
				.sidebar-arr{
					.rotate(-90deg);
				}
			}
		}

		.sidebar-children{
			display: none;
			z-index: 22;
			ul{
				.ul-reset();
				li{
					&>a{
						display: block;
						// text-align: center;
						border: solid transparent; 
						border-width: 0 3px;
						text-decoration: none;
						.text-overflow();
						padding: 8px 50px;
						line-height: 20px;
						color: #c7c7c7;
						letter-spacing: 1px;
						&.active,&:hover{
							border-left-color: @mainColor;
							background-color: #172430;
						}
						
					}
					
				}
			}
		}
	}
}

#portal-panel.portal-panel-miniSize{
	.portal-side{
		width: 50px;

		.sidebar{

			.sidebar-text,.sidebar-arr{display: none!important;}
			.sidebar-children{
				width: 150px;
				position: absolute;
				left: 50px;
				top:0;
				display: none;
				background-color:  #1d2c38;
				a{
					    padding: 8px 20px;
				}
			}
			


			&.open{
				.sidebar-link{border-left-color: @mainColor;}
				
			}
			 &:hover{
				.sidebar-link{border-left-color: @mainColor;}
				.sidebar-children{
					
					display: block!important;
				}
			} 

			
		}
	}
	.portal-detail{
		left: 50px;
		
	}
}


.scroll-wrapper{
	position: absolute;
	// z-index: 1;
	// overflow: hidden;

	.scroller{
		position: absolute;
		z-index: 1;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		width: 100%;
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		-o-text-size-adjust: none;
		text-size-adjust: none;
	}
}

#portal_close_btns{
	min-width: 100px;
	text-align: center;
}

li.dropdown.hover-open:hover{
	.dropdown-toggle{background-color: #2daff1;}
	.dropdown-menu {display: block;}
} 


#headerNavMore {

	&>a{
		padding-right: 40px;
	}
	#_caret{
		position: absolute;
		height:20px;
		width: 20px;
		line-height: 20px;
		text-align: center;
		top:50%;
		margin-top: -10px;
		right:7px;

		transition: transform 0.12s;
	    -o-transition: -o-transform 0.12s;
	    -ms-transition: -ms-transform 0.12s;
	    -moz-transition: -moz-transform 0.12s;
	    -webkit-transition: -webkit-transform 0.12s;

	    i{font-size: 12px;}
	}

	&.open,&:hover{
		&>a{background-color: #fff!important;;color: #333!important;}
		#_caret{
			.rotate(90deg);
		}
		.dropdown-menu{
			border-top: 0;
		}
	}
}

.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
}

@media (min-width: 765px){
	#headerNav_search{display: block;}
}

@media (max-width: 765px){
	#headerNav_search{display: none;}
}